<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { navigateTo, uploadFile } from '@uni-helper/uni-promises'
import user from '@/composables/user'
import { getUserData, putHeadUrl } from '@/api/user'
import type { UserDataDto } from '@/api/user/type'

const userData = ref<UserDataDto>({} as UserDataDto)

const shortName = computed(() => {
    if (!user.userInfo.value.userName?.length)
        return ''
    return user.userInfo.value.userName.length > 2 ? user.userInfo.value.userName.slice(user.userInfo.value.userName.length - 2) : user.userInfo.value.userName.slice(user.userInfo.value.userName.length - 1)
})

async function toBankCard() {
    const event = await navigateTo({
        url: '/package-mine/pages/bank-card/bank-card',
    })
    event.eventChannel.emit('extraData', {
        extraData: {
            isCollectBankCardImg: 1,
            isCollectOpenBankCity: 1,
            isCollectOpenBankName: 1,
        },
    })
}

function onToCardInfo() {
    navigateTo({
        url: '/package-mine/pages/card-info/card-info',
    })
}

async function getData() {
    const res = await getUserData()
    userData.value = res
}

function onToCardDetail() {
    navigateTo({
        url: '/package-mine/pages/card-detail/card-detail',
    })
}

/**
 * 修改用户头像
 *
 * @param event 事件对象
 * @returns 无返回值
 */
async function onModifyPortrait(event: any) {
    if (!user.userInfo.value.userId)
        return
    // 支付宝获取头像的url没有后缀名，直接上传会报错
    let url = event.detail.avatarUrl.replace('http://', 'https://')
    if (!url.endsWith('.image')) {
        const tempPath = await uni.downloadFile({
            url,
        }).catch((err) => {
            console.log('err', err)
        }) as UniApp.DownloadSuccessData
        url = tempPath.tempFilePath
    }
    const res = await uploadFile({
        url: `${globalVariable.baseUrl}/api/v1/blue/user/upload`,
        filePath: url,
        name: 'file',
        fileType: 'image',
    }).catch((err) => {
        console.log(1111, err)
    })
    const resObj = JSON.parse(res?.data as string)
    await putHeadUrl({ userHeadUrl: resObj.data.fileUrl })
    user.login()
}

onMounted(async () => {
    await user.waitLogin()
    await getData()
})
</script>

<template>
    <NavbarContainer nav-title="个人信息">
        <view>
            <view class="m-30rpx flex items-center">
                <button
                    class="mr-24rpx h-126rpx w-126rpx flex items-center justify-center rounded-full bg-#bcd9ff text-white"
                    open-type="chooseAvatar" @chooseAvatar="onModifyPortrait">
                    <image v-if="user.userInfo.value.userHeadUrl" class="h-full w-full"
                           :src="user.userInfo.value.userHeadUrl" />

                    <view v-else class="text-42rpx">{{ shortName }}</view>
                </button>
                <view class="flex-1 text-42rpx font-bold">{{ user.userInfo.value.userName }}</view>
            </view>
            <view>
                <CellGroup>
                    <Cell label="身份证号" :value="user.userInfo.value.idCardNo" />
                    <Cell label="电话号码" :value="user.userInfo.value.phone" />
                </CellGroup>
                <CellGroup>
                    <Cell label="银行卡号" link>
                        <template #value>
                            <view v-if="user.userInfo.value.bankCardNo" @click="toBankCard">
                                {{
                                    user.userInfo.value.bankCardNo }}
                            </view>
                            <view v-else class="text-primary" @click="toBankCard">去完善</view>
                        </template>
                    </Cell>
                    <Cell label="身份证照" value="3213213213123" link>
                        <template #value>
                            <view v-if="user.userInfo.value.ownIdCardFront && user.userInfo.value.ownIdCardBack"
                                  class="text-lightgray" @click="onToCardDetail">
                                已上传
                            </view>
                            <view v-else class="text-primary" @click="onToCardInfo">去完善</view>
                        </template>
                    </Cell>
                <!-- <Cell label="健康证" value="3213213213123" link ></Cell> -->
                </CellGroup>
            <!-- <CellGroup>
                <Cell label="紧急联系人" link>
                    <template #value>
                        <view class="text-base text-gray text-right">张三 18906132222</view>
                        <view class="text-base text-gray text-right mt-10rpx">上海上海市奉贤区哈雷路路894号</view>
                    </template>
                </Cell>
            </CellGroup> -->
            </view>
        </view>
    </NavbarContainer>
</template>

<style lang="scss" scoped></style>

<route lang="json">
{
    "style": {
        "navigationBarTitleText": "子弹工作"
    }
}
</route>
